<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		    body {
		              margin: 0;
		              padding: 0;
		            }
		            #wrap {
		              position: absolute;
		              width: 100%;
		              height: 100%;
		              display: flex;
		              flex-flow: column;
		              justify-content: center;
		              align-items: center;
		            }
		            h1 {
		              display: flex;
		              margin: 0;
		              padding: 0;
		              align-items: center;
		              flex: 2;
		            }
		            #main {
		              flex: 5;
		            }
		            button {
		              position: relative;
		              display: block;
		              width: 13em;
		              height: 3em;
		              margin: 2em;
		              border: none;
		              outline: none;
		              letter-spacing: .2em;
		              font-weight: bold;
		              background: #dfdfdf;
		              cursor: pointer;
		              overflow: hidden;
		              user-select: none;
		              border-radius: 2px;
		            }
		            button:nth-child(2) {
		              color: #fff;
		              background: #4285f4;
		            }
		            button:nth-child(3) {
		              color: #fff;
		              background: #00bad2;
		            }
		            button:nth-child(4) {
		              color: #fff;
		              background: #ff8a80;
		            }
		            .ripple {
		              position: absolute;
		              background: rgba(0,0,0,.15);
		              border-radius: 100%;
		              transform: scale(0);
		              pointer-events: none;
		            }
		            .ripple.show {
		              animation: ripple .75s ease-out;
		            }
		            @keyframes ripple {
		              to {
		                transform: scale(2);
		                opacity: 0;
		              }
		            }
	</style>
	<body>
		<div id="wrap">
		     <h1>dddd</h1>
		     <div id="main">
		          <button>BUTTON</button>
		          <button>BUTTON</button>
		          <button>BUTTON</button>
		          <button>BUTTON</button>
		     </div>
		</div>
	</body>
	<script>
		var addRippleEffect = function (e) {
		            var target = e.target;
		            if (target.tagName.toLowerCase() !== 'button') return false;
		            var rect = target.getBoundingClientRect();
		            var ripple = target.querySelector('.ripple');
		            if (!ripple) {
		                ripple = document.createElement('span');
		                ripple.className = 'ripple';
		                ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
		                target.appendChild(ripple);
		            }
		            ripple.classList.remove('show');
		            var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop;
		            var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;
		            ripple.style.top = top + 'px';
		            ripple.style.left = left + 'px';
		            ripple.classList.add('show');
		            return false;
		        }
		
		        document.addEventListener('click', addRippleEffect, false);
	</script>
</html>
